<template>
  <div>
    <h2>第二天内容</h2>
    <h2>条件判断指令</h2>
   <ul>
    <li>下标 -- id -- 姓名 -- 绰号</li>
    <!-- 循环遍历的时候，加入 key 属性  -->
    <!-- 1. 保持列表的状态，在删除、排序、添加等等操作之后，列表的状态不会错乱  -->
    <li v-for="(item,index) in list" :key="item.id">
      <input type="checkbox">
      {{index}} -- {{item.id}} -- {{item.name}} -- {{item.nickname}}
      <button @click="del(item.id)">删除</button>
    </li>
   </ul>
  </div>
</template>

<script>
export default{
  data(){
    return{
    list:[
      {id:2, name:'松江', nickname:'及时雨'},
      {id:5, name:'无用', nickname:'智多星'},
      {id:7, name:'林冲', nickname:'豹子头·'},
      {id:9, name:'花荣', nickname:'小李广'}
    ]
    }
  },
  methods:{
    del (id){
      console.log('删除操作,id是',id);
      // 从this.list中删除一条数据
      this.list = this.list.filter(item =>{
        // return '条件'
        // return '条件'
        return item.id  !== id
      })
    }
  }
}
</script>